import React, {Component} from 'react';
import {Link} from 'react-router-dom';
import './style.scss'

const F2 = require('@antv/f2/lib/index');
require('@antv/f2/lib/interaction/'); // 引入所有的交互行为
export default class Histogram extends Component {
  constructor() {
    super();
    const that = this;
    that.state = {
      numberText: '18%',
      nameText: '机器之血',
      color: '#2FC25B'
    };
  }

  componentDidMount() {
    const that = this;
    // F2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
    const data = [{
      name: '芳华',
      percent: 0.4,
      a: '1'
    }, {
      name: '妖猫传',
      percent: 0.2,
      a: '1'
    }, {
      name: '机器之血',
      percent: 0.18,
      a: '1'
    }, {
      name: '心理罪',
      percent: 0.15,
      a: '1'
    }, {
      name: '寻梦环游记',
      percent: 0.05,
      a: '1'
    }, {
      name: '其他',
      percent: 0.12,
      a: '1'
    }];

    // 创建饼状图对象
    const chart = new F2.Chart({
      id: 'mountNode',
      pixelRatio: window.devicePixelRatio // 指定分辨率
    });

    // 载入数据源
    chart.source(data, {
      // 数据源里的percent字段
      percent: {
        // 格式化文本内容
        formatter: function formatter(val) {
          // 把percent字段内容*100加上%号
          return val * 100 + '%';
        }
      }
    });

    chart.legend({
      position: 'bottom', // 饼状图列表显示位置
      marker: 'square' // 饼状图列表标记显示样式  例如:circle
    });

    chart.tooltip(false); // 提示信息

    chart.coord('polar', {  // 设置饼状图样式
      transposed: true,
      radius: 0.85, // 设置半径，值范围为 0 至 1
      innerRadius: 0.618 // 空心圆的半径，值范围为 0 至 1
    });

    chart.axis(false); // 坐标轴配置

    // 绘制饼状图颜色并绘制到数据上
    chart.interval().position('a*percent').color('name', ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0']).adjust('stack').style({
      lineWidth: 1, // 饼状图模块间隔
      stroke: '#fff' // 间隔部分颜色
    });

    chart.render(); // 渲染

    chart.interaction('pie-select', { // 交互
      animate: { // 交互动画
        duration: 300,
        easing: 'backOut'
      },
      defaultSelected: { // 设置初始化默认选中的数据
        name: '机器之血',
        percent: 0.18,
        a: '1'
      },

      //事件结束后的回调函数
      onEnd: function onEnd(ev) {
        const shape = ev.shape,
          data = ev.data,
          shapeInfo = ev.shapeInfo,
          selected = ev.selected;
        if (shape) { // 选中的模块
          if (selected) { // 选中还是取消选中
            that.setState({
              color: shapeInfo.color,
              numberText: data.percent * 100 + '%',
              nameText: data.name
            });
          } else {
            that.setState({
              color: '',
              numberText: '',
              nameText: ''
            });
          }
        }
      }
    });
  }

  render() {
    const that = this;
    const numbarText = that.state.numberText;
    const nameText = that.state.nameText;
    const color = that.state.color;
    return (
      <div className='pie'>
        <div className='info' style={{color: color}}>
          <p className='number'>{numbarText}</p>
          <p className='name'>{nameText}</p>
        </div>
        <canvas id="mountNode"></canvas>
        <Link to='/' className='goBack'>回到home页</Link>
      </div>
    );
  }
  ;
}